<template>
	<div>
		<template v-if="menudata">
			<template v-for="value in menudata">
				<el-sub-menu v-if="value.children" :key="value.id" class="mymenu-two" :index="value.id">
					<template #title>
						<i class="" />
						<span>{{ value.name }}</span>
					</template>
					<menu-list :menudata="value.children" />
				</el-sub-menu>
				<el-menu-item v-else :key="value.id" :index="value.id" @click="addtab(value)">
					<span>{{ value.name }}</span>
				</el-menu-item>
			</template>
		</template>
	</div>
</template>

<script lang="ts">
import { Getter, Action, namespace } from '@/assets/model/vueutils/VuexUtil';
import { Vue, Options } from 'vue-class-component';
import { defineComponent } from 'vue';

const menustore = namespace('menustore');
@Options({
	props: {
		menudata: Object
	},
	components: {
		'menu-list': Menu
	}
})
export default class Menu extends Vue {
	private menudata: any;
	@menustore.Mutation('addTabs') addTabs: any;
	@menustore.Mutation('changeTabsValue') changeTabsValue: any;
	public addtab(value: any) {
		let tab = {
			title: value.name,
			name: value.id,
			//content: value.url,
			router: value.url
		};
		this.addTabs(tab);
		this.changeTabsValue(value.id);
		this.$router.push({ path: value.url });
	}
}
</script>
